<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="24" class="card-box">
      <el-card>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item prop="organization">
            <el-select
              v-model="queryParams.organization"
              placeholder="请选择组织机构"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.sys_org_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              <el-option
                v-for="item in deptOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              />

            </el-select>
          </el-form-item>
          <el-form-item prop="productModel">
            <el-select
              v-model="queryParams.productModel"
              placeholder="请选择产品型号"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.sys_prod_model"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              <el-option
                v-for="item in productModelOptions"
                :key="item.id"
                :label="item.nameZh"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="plan">
            <el-select
              v-model="queryParams.plan"
              placeholder="请选择计划单号"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.sys_prod_plan"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              <el-option
                v-for="item in planTaskList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="week_row">
          <div class="week_box">
            <div class="week_item" :class="choosedWeek === 2 ? 'on_week':''" @click="changeWeek(2)">上一周</div>
            <div class="week_item" :class="choosedWeek === 1 ? 'on_week':''" @click="changeWeek(1)">下一周</div>
          </div>
        </div>
        <el-row :gutter="20" class="chart-box" v-loading="chartLoading">
          <el-col :span="17">
            <div class="chart-item" ref="myBarchart" />
          </el-col>
          <el-col :span="7">
            <div class="chart-item" ref="myPiechart" />
          </el-col>
        </el-row>
      </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>不合格品</span></div>
          <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item prop="organization">
              <el-select
                v-model="queryParams1.organization"
                placeholder="请选择组织机构"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.sys_org_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />

                <el-option
                  v-for="item in deptOptions"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="productModel">
              <el-select
                v-model="queryParams1.productModel"
                placeholder="请选择产品型号"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.sys_prod_model"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />

                <el-option
                  v-for="item in productModelOptions"
                  :key="item.id"
                  :label="item.nameZh"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="plan">
              <el-select
                v-model="queryParams1.plan"
                placeholder="请选择计划单号"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.sys_prod_plan"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />

                <el-option
                  v-for="item in planTaskList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table v-loading="loading" :data="testrecordList">
              <el-table-column label="产品编码" align="center" prop="smartProduct.code" />
              <el-table-column label="产品型号" align="center" prop="smartProduct.smartProductModel.nameZh" />
              <el-table-column label="产品名称" align="center" prop="smartProduct.name" />
              <el-table-column label="测试名称" align="center" prop="testName" />
              <el-table-column label="测试结果" align="center" prop="testState" />
              <el-table-column label="创建日期" align="center" prop="smartProduct.createDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.smartProduct.createDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="listTestrecord"
          />
        </el-card>
      </el-col>

      <!--<el-col :span="24" class="card-box">
        <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item prop="productId">
            <el-input
              placeholder="请输入产品ID"
              v-model="queryParams2.productCode"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="danger" size="mini" @click="handleQuery2_writeId">写ID</el-button>
            <el-button type="danger" size="mini" @click="handleQuery2_gn">功能测试</el-button>
            <el-button type="danger" size="mini" @click="handleQuery2_gy">高压测试</el-button>
            <el-button type="danger" size="mini" @click="handleQuery2_gw">高温测试</el-button>
            <el-button type="danger" size="mini" @click="handleQuery2_jc">检测功能</el-button>

          </el-form-item>
        </el-form>
        <el-tabs type="card" v-model="moddataindex" @tab-click="handleClick" >
          <el-tab-pane
            :key="index"
            v-for="(item, index) in moddataList"
            :label="index+1"
            :name="index"
          >
          </el-tab-pane>
        </el-tabs>
        <div style="width: 15%; float: left" align="left">
          <el-tree
            :props="props"
            :load="loadNode"
            lazy>
          </el-tree>
        </div>
        <div style="width: 85%; float: left">

          <div>
            <el-descriptions class="margin-top" :column="2"  border>
              <el-descriptions-item label="开关ID：" >20138888</el-descriptions-item>
              <el-descriptions-item label="操作员：">admin</el-descriptions-item>
              <el-descriptions-item label="通讯电压V：">30.8</el-descriptions-item>
              <el-descriptions-item label="通讯电缆mA:">20</el-descriptions-item>
              <el-descriptions-item label="发火电压V:">80.8</el-descriptions-item>
              <el-descriptions-item label="发火电流mA:">820</el-descriptions-item>
              <el-descriptions-item label="结果">合格</el-descriptions-item>
            </el-descriptions>
          </div>

          <div>
            <el-card>
              <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">
                <div ref="currentWaveform" style="height: 210px" />
              </div>
            </el-card>
            <el-card>
              <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">
                <div ref="voltageWaveform" style="height: 210px" />
              </div>
            </el-card>
          </div>
        </div>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { listModdata10 } from "@/api/smart/moddata";
import { productQualityNum,productQualityNumWeek,listProductAll } from "@/api/smart/product";
import { listDept } from "@/api/system/dept";
import { listModel } from "@/api/smart/model";
import { listPlanTask} from "@/api/smart/planTask";
import { listTestrecord,UnQualityList } from "@/api/smart/testrecord";
import { listWaveform,getwaveformbypid } from "@/api/smart/waveform";
export default {
  name: "Index",
  dicts: ['sys_org_type','sys_prod_plan', 'sys_prod_model'],
  data() {
    return {
      loading: false,
      // 电流波形
      currentWaveform: null,
      // 电压波形
      voltageWaveform: null,
      moddata:[],
      myBarchart: null,
      myPiechart: null,
      // 显示搜索条件
      showSearch: true,
      // 产品测试数据表格数据
      moddataList: [],
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      // 查询参数
      queryParams: {
        organization: null,
        plan: null,
        productModel: null,
        previous: 0
      },
      queryParams1: {
        organization: null,
        plan: null,
        productModel: null,
        pageNum: 1,
        pageSize: 10,
        tastState: 3
      },
      queryParams2: {
        productCode: null,
        notes:""
      },
      productQualityNumWeek: {},
      productQualityNum:{},
      testrecordList:[],
      // 总条数
      total: 0,
      // 选择周
      choosedWeek: 2,
      currentWeek: 0,
      chartLoading: false,
      deptOptions:null,
      productModelOptions:null,
      planTaskList:null,
      deptQuery: {
        status: 0
      },
      moddataindex:0,
      disablestate:{
        disable11:true,
        disable12:true,
        disable21:true,
        disable22:true,
      },
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
    };
  },
  created() {
    this.listDept();
    this.listModel();
    this.listPlanTask();
    this.getList();
    //这个代码是用于做公开接口数据获取测试，可随时注释
    this.getList2();
    this.listTestrecord();
  },
  methods: {

    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '写ID' },{ name: '功能测试' },{ name: '高压测试' },{ name: '高温测试' },{ name: '检测功能' }]);
      }
      if (node.level > 0) {
        // console.log("mode===" + JSON.stringify(node))
        if(node.le === '写ID'){
          // var res = this.handleQuery2_writeId()
          console.log("res===")
          return resolve(res);
        }else {
          return resolve([]);
        }

      }
      //
      // setTimeout(() => {
      //   const data = [{
      //     name: 'leaf',
      //     leaf: true
      //   }, {
      //     name: 'zone'
      //   }];
      //
      //   resolve(data);
      // }, 500);
    },

    orgchange1(){
      this.disablestate.disable11 = false;
      this.disablestate.disable12 = true;
      this.queryParams.productModel = null;
      this.queryParams.plan = null;
      console.log("__________" + this.disablestate.disable11 + "___________" + this.disablestate.disable12)
    },

    prodchange1(){
      this.disablestate.disable12 = false;
      this.queryParams.plan = null;
      console.log("__________" + this.disablestate.disable11 + "___________" + this.disablestate.disable12)
    },

    // 切换周
    changeWeek(val){
      this.choosedWeek = val;
      if(val == 1 && this.currentWeek > 0){
        this.currentWeek -= 1;
      }
      if(val == 2){
        this.currentWeek += 1;
      }
      this.queryParams.previous = this.currentWeek
      this.getList2()
    },
    /** 查缓存询信息 */
    getList() {
      getwaveformbypid(20293433).then(res =>{
        console.log(res)
      });

      //故意加的条数限制，否则数据过多系统下发时间过长导致卡死
      this.queryParams2.pageNum=1;
      this.queryParams2.pageSize=50;
        listWaveform(this.queryParams2).then(response => {
          this.moddataList = response.rows;
          this.moddataindex = 0;
          this.handleView();
        });
    },
    handleClick(tab, event){
      this.moddataindex = tab.label-1;
      this.handleView();
    },
    handleView(){
      var xdata = [];
      var cdata = [];
      var vdata = [];
      if(this.moddataList.length > 0){
        this.moddata = this.moddataList[this.moddataindex]['data'];

        this.moddata = JSON.parse(this.moddata);
        for (let rt = 0; rt < this.moddata.length; rt++) {
          xdata.push(this.moddata[rt]['time']);
          cdata.push(this.moddata[rt]['current']);
          vdata.push(this.moddata[rt]['voltage']);
        }
      }
      this.$nextTick(() => {
        this.currentWaveform = echarts.init(this.$refs.currentWaveform, "macarons");
        this.currentWaveform.setOption({
          xAxis: {
            type: 'category',
            data: xdata
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: cdata,
              type: 'line',
              smooth: true
            }
          ],
          title: [
            {
              left: 'center',
              text: '电流图'
            }
          ],
        });
        this.voltageWaveform = echarts.init(this.$refs.voltageWaveform, "macarons");
        this.voltageWaveform.setOption({
          xAxis: {
            type: 'category',
            data: xdata
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: vdata,
              type: 'line',
              smooth: true
            }
          ],
          title: [
            {
              left: 'center',
              text: '电压图'
            }
          ],
        });
      });
    },

    // 打开加载层
    /*openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },*/
    //测试代码
    getList2() {
      this.chartLoading = true;
      productQualityNumWeek(this.queryParams).then(response => {
        this.productQualityNumWeek = JSON.parse(JSON.stringify(response.data));
        var xData = [];
        var qData = [];
        var uqData = [];
        for(let key in this.productQualityNumWeek){
          xData.push(key);
          qData.push(this.productQualityNumWeek[key]['quality']);
          uqData.push(this.productQualityNumWeek[key]['unquality']);
        }
        this.$nextTick(() => {
          this.myBarchart = echarts.init(this.$refs.myBarchart, "macarons");
          this.myBarchart.setOption({
            xAxis: {
              data: xData
            },
            // 图例
            legend: {
              data: ["合格", "不合格"],
              top: "0%",
              itemWidth:20,
              itemHeight:10
            },
            yAxis: {},
            grid: {
              top: "10%",
              right: "5%",
              left:"5%",
              bottom: "10%",
            },
            series: [
              {
                barWidth:20,
                type: "bar", //形状为柱状图
                data: qData,
                name: "合格", // legend属性
                label: {
                  // 柱状图上方文本标签，默认展示数值信息
                  show: true,
                  position: "top"
                }
              },
              {
                barWidth:20,
                type: "bar", //形状为柱状图
                data: uqData,
                name: "不合格", // legend属性
                label: {
                  // 柱状图上方文本标签，默认展示数值信息
                  show: true,
                  position: "top"
                }
              }
            ]
          });
        });
      });
      productQualityNum(this.queryParams).then(response => {
        var pieData = [];
        this.productQualityNum = JSON.parse(JSON.stringify(response.data));
        for(let key in this.productQualityNum){
          if(key === 'quality'){
            pieData.push({value : this.productQualityNum[key], name : '完成'})
          }
          if(key === 'unquality'){
            pieData.push({value : this.productQualityNum[key], name : '未完成'})
          }
          if(key === 'unfinish'){
            pieData.push({value : this.productQualityNum[key], name : '不合格'})
          }
        }
        this.$nextTick(() => {
          this.myPiechart = echarts.init(this.$refs.myPiechart, "macarons");
          this.myPiechart.setOption({
            legend: {
              // 图例
              orient: 'vertical',
              data: ["完成","未完成","不合格"],
              top: "0%",
              right:'0%',
              itemWidth:20,
              itemHeight:10
            },
            grid: {
              top: "10%",
              right: "5%",
              left:"5%",
              bottom: "10%",
            },
            series: [
              {
                type: "pie",
                label: {
                  show: true,
                  formatter: "{b}\n{c}\n({d}%)" // b代表名称，c代表对应值，d代表百分比
                },
                radius: "50%", //饼图半径
                data: pieData
              }
            ]
          });
        });
      }).finally(() => {
        this.chartLoading = false
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 重置按钮操作 */
    resetQuery1() {
      this.resetForm("queryForm1");
      this.handleQuery1();
    },
    /** 重置按钮操作 */
    resetQuery2() {
      this.resetForm("queryForm2");
      this.handleQuery2();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList2();
    },
    /** 搜索按钮操作 */
    handleQuery1() {
      this.listTestrecord();
    },
    /** 搜索按钮操作 */
    handleQuery2() {
      this.getList();
    },
    handleQuery2_writeId(){
      this.queryParams2.notes = "写ID";
      this.getList();
    },
    handleQuery2_gn(){
      this.queryParams2.notes = "功能测试";
      this.getList();
    },
    handleQuery2_gy(){
      this.queryParams2.notes = "高压测试";
      this.getList();
    },
    handleQuery2_gw(){
      this.queryParams2.notes = "高温测试";
      this.getList();
    },
    handleQuery2_jc(){
      this.queryParams2.notes = "检查功能";
      this.getList();
    },

    /** 不合格详情列表查询 */
    /*listProductAll() {
      listProductAll(this.queryParams1).then(response => {
        console.log(response + "------------------")
        this.productAllList = response.rows;
        this.total = response.total;
      });
    },*/
    /** 查询组织机构列表 */
    listDept() {
      listDept(this.deptQuery).then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询产品型号列表 */
    listModel() {
      listModel().then(response => {
        this.productModelOptions = response.rows;
      });
    },
    /** 查询计划任务列表 */
    listPlanTask() {
      listPlanTask().then(response => {
        this.planTaskList = response.data;
      });
    },
    /** 查询产品测试记录列表 */
    listTestrecord() {
      this.loading = true;
      UnQualityList(this.queryParams1).then(response => {
        this.testrecordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #F7F7F7;
  }
  .bg-purple {
    background: #F7F7F7;
  }
  .bg-purple-light {
    background:	#F7F7F7;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color:	#F7F7F7;
  }

</style>
<style lang="scss" scoped>
.week_row{
  display:flex;
  justify-content: center;
  .week_box{
    display:flex;
    margin:10px 0;
    .week_item{
      cursor: pointer;
      padding:5px 10px;
      background:#ffffff;
      &.on_week{
        background:#1890ff;
        color:#ffffff;
      }
    }
  }
}
.chart-box{
  width:100%;
  height:230px;
  .el-col{
    height:100%;
  }
  .chart-item{
    height:100%;
    width:100%;
  }
}
</style>
